import React, { FC, useEffect, useState } from "react";
import { observer, inject } from "mobx-react";
import { PageHeader, Button, Popover, Tree } from "antd";
import type { DataNode } from "antd/lib/tree";
import { useParams } from "react-router-dom";
import Langbox from "../components/Langbox";
import { ReactionInfo, ViewReagentList } from "../Designer/Reactordrawer";
import { ITStore } from "../../store";
import { ITDesinger } from "../../store/interfaces";
import "./index.less";

type TProp = {
  store: ITStore;
};

const Print: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    languageStore: { getAllLanguage, lang },
    designerStore: { getDesignerDetail },
    reagentStore: { getAllReagetList },
    dictionaryStore: { getFullDict },
  } = store;
  const params = useParams();

  const [designerData, setDesignerData] = useState<ITDesinger | null>(null);

  const [showTable, setShowTable] = useState<boolean>(true);

  const [showList, setShowList] = useState<boolean>(true);

  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(["0", "1"]);

  useEffect(() => {
    const getData = async () => {
      await getAllLanguage(false);
      await getFullDict(false);
      await getAllReagetList();

      const result: ITDesinger | null = await getDesignerDetail({
        id: params.id,
      });
      setDesignerData(result);
    };

    if (params.id) {
      getData();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const treeData: DataNode[] = [
    {
      title: lang["langreagentinfo"],
      key: "0",
      children: [
        {
          title: lang["langname"],
          key: "0-1",
        },
        {
          title: lang["langabbreviation"],
          key: "0-2",
        },
        {
          title: lang["langcnname"],
          key: "0-3",
        },
        {
          title: lang["langformula"],
          key: "0-4",
        },
        {
          title: lang["langdensity"],
          key: "0-5",
        },
        {
          title: lang["langpercentage"],
          key: "0-6",
        },
        {
          title: lang["langmolecularweight"],
          key: "0-7",
        },
        {
          title: lang["langmeltingpoint"],
          key: "0-8",
        },
        {
          title: lang["langboilingpoint"],
          key: "0-9",
        },
        {
          title: lang["langstructuralformula"],
          key: "0-10",
        },
        {
          title: lang["langcasno"],
          key: "0-11",
        },
        {
          title: lang["langslot"],
          key: "0-12",
        },
        {
          title: lang["langbottleposition"],
          key: "0-13",
        },
        {
          title: lang["langtype"],
          key: "0-14",
        },
        {
          title: lang["langvolatile"],
          key: "0-15",
        },
        {
          title: lang["langviscose"],
          key: "0-16",
        },
        {
          title: lang["langamount"],
          key: "0-17",
        },
        {
          title: lang["langused"],
          key: "0-18",
        },
        {
          title: lang["langnote"],
          key: "0-19",
        },
      ],
    },
    { title: lang["langreactioninfo"], key: "1", children: [] },
  ];

  const onCheck: any = (checkedKeys: React.Key[]) => {
    let tempShowTable = false;
    let tempShowList = false;
    if (checkedKeys.indexOf("0") >= 0) {
      tempShowTable = true;
    } else {
      checkedKeys.some((item: any) => {
        if (item.indexOf("0-") >= 0) {
          tempShowTable = true;
          return true;
        }
        return false;
      });
    }
    if (checkedKeys.indexOf("1") >= 0) {
      tempShowList = true;
    }
    setCheckedKeys(checkedKeys);
    setShowTable(tempShowTable);
    setShowList(tempShowList);
  };

  return (
    <>
      <PageHeader
        title={""}
        className="printhead"
        extra={[
          <Popover
            key={1}
            placement="bottom"
            title={""}
            content={
              <Tree
                checkable
                selectable={false}
                defaultExpandedKeys={["0", "1"]}
                defaultCheckedKeys={["0", "1"]}
                onCheck={onCheck}
                treeData={treeData}
              />
            }
            trigger="click"
          >
            <Button>{lang["langselectprint"]}</Button>
          </Popover>,
          <Button
            key={2}
            type="primary"
            onClick={() => {
              window.print();
            }}
          >
            {lang["langprint"]}
          </Button>,
          <div style={{ marginLeft: 20 }} key={3}>
            <Langbox />
          </div>,
        ]}
      />
      <div className="printcnt">
        {showTable && (
          <ViewReagentList data={designerData} treekeys={checkedKeys} />
        )}

        {showList && (
          <div style={{ marginTop: 40 }}>
            <ReactionInfo data={designerData} />
          </div>
        )}
      </div>
    </>
  );
};

export default inject("store")(observer(Print));
